<template>
	<view class="container">
		<view class="team-photo" style="margin-top: 40rpx;">
			<view>
				<text style="font-size: 24px; font-weight: bold;">团队照片</text>
				<text style="margin-left: 30rpx;color: #999999">上传照片可为空</text>
			</view>
			<image v-if="imagePath" :src="imagePath" mode="aspectFill"
				style="width: 150rpx;height: 150rpx;display: inline-block;margin-left: 10rpx;margin-top: 40rpx;background-color: white;border-radius: 10%;padding: 8px;">
			</image>
			<image v-if="!imagePath" src="/static/image/camera.png"
				style="width: 100rpx;height: 100rpx;display: inline-block;margin-left: 10rpx;margin-top: 40rpx;background-color: white;border-radius: 10%;padding: 20px;"
				@click="choosePic"></image>
			<image v-if="imagePath" src="/static/image/remove.png"
				style="width: 100rpx;height: 100rpx;display: inline-block;margin-left: 10rpx;margin-top: 40rpx;background-color: white;border-radius: 10%;padding: 20px;"
				@click="removePic"></image>
		</view>

		<!-- 团队名称输入框 -->
		<view class="input-group" style="margin-top: 60rpx;">
			<text style="font-size: 24px; font-weight: bold;">团队名称</text>
			<input style="margin-top: 30rpx;background-color: white;height: 70rpx;" type="text"
				v-model="teamData.teamName" placeholder="请输入团队名称" class="input" />
		</view>
		<view class="input-group" style="margin-top: 40rpx;">
			<text style="font-size: 24px; font-weight: bold;">团队描述</text>
			<input style="margin-top: 30rpx;background-color: white;height: 70rpx;" type="text"
				v-model="teamData.description" placeholder="请输入团队描述(可为空)" class="input" />
		</view>
		<!-- 创建团队按钮 -->
		<button type="primary" class="create-btn" @click="createTeam">
			<text style="font-weight: bold;color: white;">创建团队</text>
		</button>
	</view>
</template>

<script>
	import api from '../../api/api';
	export default {
		data() {
			return {
				imagePath: '', // 保存单个图片路径
				teamData: {
					teamName: '',
					description: ''
				},
			}
		},
		onLoad() {},
		methods: {
			createTeam() {
				if (this.teamData.description.length > 50) {
					uni.showToast({
						title: '团队描述长度不超过50', // 提示的内容
						icon: 'none', // 图标，可选值有 'success', 'loading', 'none'
						duration: 2000 // 提示的持续时间，单位毫秒
					});
					return
				}
				this.teamData.teamName = this.teamData.teamName.replace(/\s+/g, '')
				if (this.teamData.teamName == '' || this.teamData.teamName.length > 20) {
					uni.showToast({
						title: '团队名称需要1-20个有效字符', // 提示的内容
						icon: 'none', // 图标，可选值有 'success', 'loading', 'none'
						duration: 2000 // 提示的持续时间，单位毫秒
					});
					return
				}
				if (this.imagePath != '') {
					api.uploadAvatar(this.imagePath).then(res => {
						let obj1 = {
							teamName: this.teamData.teamName,
							description: this.teamData.description,
							imagePath: res.data,
							token: uni.getStorageSync('WeTeamToken')
						}
						api.createTeam(obj1).then(res1 => {
							if (res1.data.data === true) {
								uni.showToast({
									title: '创建成功', // 提示的内容
									icon: 'success', // 图标，可选值有 'success', 'loading', 'none'
									duration: 800 // 提示的持续时间，单位毫秒
								});
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/team_main/team_main'
									});

								}, 800);
							} else {
								uni.showToast({
									title: '创建失败: ' + res1.data.message, // 提示的内容
									icon: 'none', // 图标，可选值有 'success', 'loading', 'none'
									duration: 2000 // 提示的持续时间，单位毫秒
								});
							}
						})
					})
				} else {
					let obj1 = {
						teamName: this.teamData.teamName,
						description: this.teamData.description,
						imagePath: '',
						token: uni.getStorageSync('WeTeamToken')
					}
					// console.log(uni.getStorageSync('WeTeamToken'))
					api.createTeam(obj1).then(res1 => {
						if (res1.data.data === true) {
							uni.showToast({
								title: '创建成功', // 提示的内容
								icon: 'success', // 图标，可选值有 'success', 'loading', 'none'
								duration: 800 // 提示的持续时间，单位毫秒
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/team_main/team_main'
								});
							}, 800);
						} else {
							uni.showToast({
								title: '创建失败: ' + res1.data.message, // 提示的内容
								icon: 'none', // 图标，可选值有 'success', 'loading', 'none'
								duration: 2000 // 提示的持续时间，单位毫秒
							});
						}
					})
				}
			},
			removePic() {
				this.imagePath = ''
			},
			choosePic() {
			    const that = this;
			    uni.chooseImage({
			        count: 1, // 限制只能选择一张图片
			        sizeType: ['compressed'], // 可以根据需要选择是原图还是压缩图
			        sourceType: ['album'], // 可以从相册选择或者使用相机拍摄
			        success: function(res) {
			            // 获取图片文件大小
			            uni.getFileInfo({
			                filePath: res.tempFilePaths[0],
			                success: function(info) {
			                    // 判断文件大小是否大于500KB
			                    if (info.size > 500 * 1024) {
			                        uni.showToast({
			                            title: '图片不能超过500KB',
			                            icon: 'none'
			                        });
			                    } else {
			                        // 图片大小合适，赋值路径
			                        that.imagePath = res.tempFilePaths[0];
			                    }
			                },
			                fail(err) {
			                    console.log('getFileInfo fail:', err);
			                }
			            });
			        },
			        fail(err) {
			            console.log('chooseImage fail:', err);
			        }
			    });
			},

		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #F2F2F2;
		height: 95vh;
	}

	.input {
		border: 1px solid #ccc;
		padding: 10rpx;
		border-radius: 20rpx;
	}

	.create-btn {
		width: 80%;
		margin: 0 auto;
		position: fixed;
		bottom: 60rpx;
		left: 70rpx;
		background-color: #5A91F7
	}
</style>